<template>
  <div class="login-container">

    <!-- 添加醒目大标题 -->
    <div class="highlight-title">
      <span class="highlight-word">免费<span class="check-color">查</span>重</span>
      <span class="separator"></span>
      <span class="highlight-word">快速<span class="decrease-color">降</span>AIGC</span>
    </div>

<!--      &lt;!&ndash; 轮播图区域 &ndash;&gt;-->
<!--      <div class="login-carousel">-->
<!--        <el-carousel :interval="4000" height="600px" indicator-position="outside">-->
<!--          <el-carousel-item v-for="(item, index) in carouselImages" :key="index">-->
<!--            <img :src="item" alt="轮播图" class="carousel-image" />-->
<!--          </el-carousel-item>-->
<!--        </el-carousel>-->
<!--      </div>-->

    <el-card class="login-card">
      <div class="login-header">
        <h2 class="login-title">沐影在线降重</h2>
        <div class="login-subtitle">安全便捷的智能降重体验</div>
        <div class="login-subtitle" style="color: red;">登录前请先注册！</div>
      </div>




      <!-- 表单切换 -->
<div v-if="!showRegister">
  <el-tabs v-model="activeTab" stretch @tab-click="handleTabChange">
    <el-tab-pane label="验证码登录" name="sms">
      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginFormRef"
          label-position="top"
          @submit.prevent
      >
        <el-form-item label="手机号码" prop="phone">
          <el-input
              v-model="loginForm.phone"
              placeholder="请输入11位手机号"
              clearable
              @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="短信验证码" prop="code">
          <div class="code-input-group">
            <el-input
                v-model="loginForm.code"
                placeholder="4位验证码"
                clearable
                @keyup.enter="handleLogin"
            >
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
            <el-button
                class="send-btn"
                :disabled="isSending"
                @click="sendSmsCode"
            >
              {{ countdown > 0? `${countdown}s后重发` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>

        <el-button
            type="primary"
            class="login-btn"
            :loading="loading"
            @click="handleLogin"
        >
          立即登录
        </el-button>
      </el-form>
    </el-tab-pane>

    <!-- 新增密码登录选项卡 -->
    <el-tab-pane label="密码登录" name="password">
      <el-form
          :model="passwordForm"
          :rules="passwordLoginRules"
          ref="passwordFormRef"
          label-position="top"
          @submit.prevent
      >
        <el-form-item label="手机号码" prop="phone">
          <el-input
              v-model="passwordForm.phone"
              placeholder="请输入11位手机号"
              clearable
              @keyup.enter="handlePasswordLogin"
          >
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
              v-model="passwordForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter="handlePasswordLogin"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-button
            type="primary"
            class="login-btn"
            :loading="passwordLoading"
            @click="handlePasswordLogin"
        >
          立即登录
        </el-button>
      </el-form>
    </el-tab-pane>
  </el-tabs>

  <div class="register-link">
    没有账号？<a href="javascript:;" @click="toggleForm">立即注册</a>
  </div>
</div>

  

      <!-- 注册表单 -->
      <div v-else>
        <div class="form-header">
          <h3>用户注册</h3>
        </div>
        <el-form
            :model="registerForm"
            :rules="registerRules"
            ref="registerFormRef"
            label-position="top"
            @submit.prevent
        >
          <el-form-item label="用户名" prop="name">
            <el-input
                v-model="registerForm.name"
                placeholder="请输入用户名"
                clearable
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!--          <el-form-item label="性别" prop="gender">-->
          <!--            <el-radio-group v-model="registerForm.gender">-->
          <!--              <el-radio :label="1">男</el-radio>-->
          <!--              <el-radio :label="2">女</el-radio>-->
          <!--            </el-radio-group>-->
          <!--          </el-form-item>-->

          <el-form-item label="手机号码" prop="phone">
            <el-input
                v-model="registerForm.phone"
                placeholder="请输入11位手机号"
                clearable
            >
              <template #prefix>
                <el-icon><Iphone /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="短信验证码" prop="code">
            <div class="code-input-group">
              <el-input
                  v-model="registerForm.code"
                  placeholder="4位验证码"
                  clearable
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
              <el-button
                  class="send-btn"
                  :disabled="isSendingRegister"
                  @click="sendRegisterSmsCode"
              >
                {{ countdownRegister > 0? `${countdownRegister}s后重发` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请设置登录密码"
                show-password
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="邀请码" prop="invitationCode">
            <el-input
                v-model="registerForm.invitationCode"
                placeholder="请输入邀请码"
                clearable
            >
              <template #prefix>
                <el-icon><Ticket /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-button
              type="primary"
              class="login-btn"
              :loading="registering"
              @click="handleRegister"
          >
            立即注册
          </el-button>
        </el-form>

        <div class="login-link">
          已有账号？<a href="javascript:;" @click="toggleForm">返回登录</a>
        </div>
      </div>
    </el-card>

    <!-- 客服邀请框 -->
    <div class="customer-service-box" @mouseenter="showQrCode = true" @mouseleave="showQrCode = false">
      <div class="gift-icon-wrapper">
        <el-icon class="gift-icon"><Present /></el-icon>
      </div>
      <div class="service-text">添加客服领取专属邀请码享福利！</div>

      <!-- 悬浮出现的二维码气泡 -->
      <div class="qrcode-popup" v-show="showQrCode">
        <div class="qrcode-container">
          <img src="/wx.png" alt="微信二维码" class="qrcode-img" />
          <p class="qrcode-text">添加客服微信，领取专享福利</p>
        </div>
      </div>
    </div>


    <!-- 动态背景装饰 -->
    <div class="decorate-circle circle-1"></div>
    <div class="decorate-circle circle-2"></div>
    <div class="decorate-circle circle-3"></div>
    <div class="decorate-circle circle-4"></div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Iphone, Message, User, Lock, Ticket, Present } from '@element-plus/icons-vue' // 添加 Present 图标
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
// 添加在其他变量之后
const showQrCode = ref(false)

// 动态设置网关地址
axios.defaults.baseURL = import.meta.env.VITE_GATEWAY_URL || 'http://localhost:8080';
axios.defaults.withCredentials = true;
// 获取 router 实例
const router = useRouter()


// 轮播图数据
const carouselImages = [
  '/my01.png',
  '/my02.png',
  '/my03.png'
];

// 登录表单数据
const activeTab = ref('sms')
const loginForm = reactive({
  phone: '',
  code: ''
})
const isSending = ref(false)
const countdown = ref(0)
const loading = ref(false)

// 密码登录表单数据
const passwordForm = reactive({
  phone: '',
  password: ''
})
const passwordLoading = ref(false)

const showRegister = ref(false)
// 注册表单数据
const registerForm = reactive({
  name: '',
  phone: '',
  code: '',
  password: ''
})
const isSendingRegister = ref(false)
const countdownRegister = ref(0)
const registering = ref(false)

// 切换表单
const toggleForm = () => {
  showRegister.value = !showRegister.value
}

// 登录验证规则
const loginRules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' }
  ]
})

// 密码登录验证规则
const passwordLoginRules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ]
})

// 注册验证规则
const registerRules = reactive({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],

  invitation_code: [
    { max: 20, message: '邀请码长度不超过20个字符', trigger: 'blur' }
  ]
})

// 发送登录验证码
const sendSmsCode = async () => {
  try {
    if (!/^1[3-9]\d{9}$/.test(loginForm.phone)) {
      return ElMessage.warning('请输入有效的手机号码')
    }

    isSending.value = true
    // 调用发送接口
    await axios.post('/user/sendMsg', { phone: loginForm.phone });

    ElMessage.success('验证码已发送')
    startCountdown()
  } catch (error) {
    ElMessage.error(error.message || '发送失败')
  } finally {
    isSending.value = false
  }
}

// 发送注册验证码
const sendRegisterSmsCode = async () => {
  try {
    if (!/^1[3-9]\d{9}$/.test(registerForm.phone)) {
      return ElMessage.warning('请输入有效的手机号码')
    }

    isSendingRegister.value = true
    // 调用发送接口
    await axios.post('/user/sendMsg', { phone: registerForm.phone });

    ElMessage.success('验证码已发送')
    startRegisterCountdown()
  } catch (error) {
    ElMessage.error(error.message || '发送失败')
  } finally {
    isSendingRegister.value = false
  }
}

// 登录倒计时处理
let timer = null
const startCountdown = () => {
  countdown.value = 60
  timer = setInterval(() => {
    if (countdown.value <= 0) {
      clearInterval(timer)
      return
    }
    countdown.value--
  }, 1000)
}

// 注册倒计时处理
let registerTimer = null
const startRegisterCountdown = () => {
  countdownRegister.value = 60
  registerTimer = setInterval(() => {
    if (countdownRegister.value <= 0) {
      clearInterval(registerTimer)
      return
    }
    countdownRegister.value--
  }, 1000)
}

// 验证码登录
const handleLogin = async () => {
  try {
    loading.value = true;
    const user = { phone: loginForm.phone };
    const code = loginForm.code;

    // 调用接口
    const { data } = await axios.post(`/user/login`, JSON.stringify(user), {
      params: { code },
      headers: { 'Content-Type': 'application/json' },
      withCredentials: true
    });

    if (data.code === 1) {
      // 从响应中获取令牌和用户信息
      const responseData = data.data;
      const token = responseData.token;
      const user = responseData.user;
      const role = user.role;
      const invitationCode=user.invitation_code

      // 存储令牌和用户ID
      sessionStorage.setItem('token', token);
      sessionStorage.setItem('userId', user.id);
      sessionStorage.setItem('role', role);
      sessionStorage.setItem('invitationCode',invitationCode);

      ElMessage.success('欢迎回来！');
      router.push({ name: 'home' });
    } else {
      throw new Error(data.msg || '登录失败');
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败');
  } finally {
    loading.value = false;
  }
};

// 密码登录
const handlePasswordLogin = async () => {
  try {
    passwordLoading.value = true;
    const phone = passwordForm.phone;
    const password = passwordForm.password;

    // 调用密码登录接口
    const { data } = await axios.post('/user/loginWithPassword', null, {
      params: { phone, password },
      headers: { 'Content-Type': 'application/json' },
      withCredentials: true
    });

    if (data.code === 1) {
      // 从响应中获取令牌和用户信息
      const responseData = data.data;
      const token = responseData.token;
      const user = responseData.user;
      const role = user.role;
      const invitationCode=user.invitation_code


      // 存储令牌和用户ID
      sessionStorage.setItem('token', token);
      sessionStorage.setItem('userId', user.id);
      sessionStorage.setItem('role', role);
      sessionStorage.setItem('invitationCode',invitationCode);

      ElMessage.success('登录成功！');
      router.push({ name: 'home' });
    } else {
      throw new Error(data.msg || '登录失败');
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败，请检查手机号和密码');
  } finally {
    passwordLoading.value = false;
  }
};


// 注册处理
const handleRegister = async () => {
  try {
    registering.value = true;

      // 先发送验证码验证
      const { data: verifyData } = await axios.post('/user/verifyPhone', null, {
        params: {
          phone: registerForm.phone,
          code: registerForm.code
        },
        headers: { 'Content-Type': 'application/json' },
        withCredentials: true
      });

      if (verifyData.code !== 1) {
        throw new Error(verifyData.msg || '验证码验证失败，请重新获取');
      }

    // 构建用户数据
    const user = {
      name: registerForm.name,
      phone: registerForm.phone,
      password: registerForm.password,
      invitation_code: registerForm.invitationCode || null
    };

    // 调用注册接口
    const { data } = await axios.post('/user/register', JSON.stringify(user), {
      headers: { 'Content-Type': 'application/json' },
      withCredentials: true
    });

    if (data.code === 1) {
      ElMessage.success('注册成功！');
      // 切换到登录表单
      showRegister.value = false;
      activeTab.value = 'password';
      passwordForm.phone = registerForm.phone;
    } else {
      throw new Error(data.msg || '注册失败');
    }
  } catch (error) {
    ElMessage.error(error.message || '注册失败');
  } finally {
    registering.value = false;
  }
};

// Tab 切换处理
const handleTabChange = () => {
  // 可以在这里处理 tab 切换事件，比如复制手机号到另一个表单
  if (activeTab.value === 'sms' && passwordForm.phone === '' && loginForm.phone !== '') {
    passwordForm.phone = loginForm.phone;
  } else if (activeTab.value === 'password' && loginForm.phone === '' && passwordForm.phone !== '') {
    loginForm.phone = passwordForm.phone;
  }
};

// 组件卸载前清除计时器
const beforeUnmount = () => {
  if (timer) clearInterval(timer);
  if (registerTimer) clearInterval(registerTimer);
};
</script>

<style scoped>
/* 高亮标题样式 */
/* 高亮标题样式 */
.highlight-title {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  font-size: 60px; /* 更大的字体 */
  font-weight: 800;
  letter-spacing: 3px;
  display: flex;
  flex-direction: row; /* 左右并排 */
  align-items: center;
  gap: 20px; /* 增加间距 */
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  animation: bounce-in 1s ease-out;
  white-space: nowrap; /* 防止文字换行 */
}

.highlight-word {
  padding: 0; /* 移除内边距 */
  line-height: 1.2;
  /* 移除背景和阴影 */
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
}

.check-color {
  color: #F56C6C;
  font-size: 70px; /* 更大的字体 */
  font-weight: 800;
  animation: pulse 2s infinite;
}

.decrease-color {
  color: #4b88d8;
  font-size: 70px; /* 更大的字体 */
  font-weight: 800;
  animation: pulse 2s infinite;
  animation-delay: 1s;
}

/* 移除分隔线 */
.separator {
  display: none;
}

/* 更新登录容器布局，使轮播图和登录框并排显示 */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
  padding: 0 20px;
  gap: 50px; /* 添加间距，使轮播图和登录框之间有空隙 */
}


/* 轮播图容器 */
.login-carousel {
  width: 600px; /* 保持宽度 */
  height: auto; /* 让高度自适应 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
}

/* 调整轮播图高度 */
:deep(.el-carousel__container) {
  height: 300px !important; /* 降低高度，使比例更扁平 */
}

/* 轮播图图片样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充整个容器 */
  object-position: center; /* 居中图片 */
  background-color: #f8f8f8;
  transition: transform 0.3s ease;
}



/* 调整登录卡片 */
.login-card {
  width: 420px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  overflow: hidden;
  border: none;
  padding: 30px 25px;
  margin-top: 0; /* 移除顶部边距 */
}

.login-header {
  text-align: center;
  margin-bottom: 25px;
}

.login-title {
  color: #2c3e50;
  font-size: 26px;
  margin-bottom: 8px;
  font-weight: 600;
  background: linear-gradient(45deg, #3498db, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  color: #7f8c8d;
  font-size: 14px;
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.form-header h3 {
  font-size: 20px;
  color: #2c3e50;
  margin: 0;
  position: relative;
  display: inline-block;
}

.form-header h3::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  background: linear-gradient(45deg, #3498db, #6366f1);
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px;
}

.code-input-group {
  display: flex;
  gap: 12px;
}

.send-btn {
  width: 120px;
  flex-shrink: 0;
}

.login-btn {
  width: 100%;
  margin-top: 20px;
  height: 42px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(45deg, #3498db, #6366f1);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3);
}

.register-link, .login-link {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #606266;
}

.register-link a, .login-link a {
  color: #3498db;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.register-link a:hover, .login-link a:hover {
  color: #6366f1;
}

.decorate-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, #6b8dd6 0%, #8e37d7 100%);
  opacity: 0.1;
  z-index: 0;
  animation: float 15s infinite alternate ease-in-out;
}

.circle-1 {
  width: 300px;
  height: 300px;
  top: -50px;
  left: -50px;
  animation-delay: 0s;
}

.circle-2 {
  width: 200px;
  height: 200px;
  bottom: -30px;
  right: -30px;
  animation-delay: 2s;
}

.circle-3 {
  width: 150px;
  height: 150px;
  top: 40%;
  right: 20%;
  animation-delay: 4s;
}

.circle-4 {
  width: 100px;
  height: 100px;
  bottom: 25%;
  left: 15%;
  animation-delay: 6s;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-15px) rotate(5deg);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 5px);
  }
  70% {
    transform: translate(-50%, -3px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

:deep(.el-tabs__item) {
  font-size: 16px !important;
  padding: 0 28px !important;
}

:deep(.el-input__inner) {
  height: 42px !important;
}

:deep(.el-form-item__label) {
  font-size: 14px !important;
  color: #5a6a7a !important;
  padding-bottom: 6px !important;
}

:deep(.el-input__wrapper) {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s !important;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset !important;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #3498db inset !important;
}

/* 轮播图指示器样式 */
:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__indicator) {
  margin: 0 6px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(52, 152, 219, 0.7);
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #3498db;
  transform: scale(1.2);
}

/* 响应式布局 */
@media (max-width: 900px) {
  .login-wrapper {
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }

  .login-carousel {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  .login-card {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  .highlight-title {
    position: static;
    transform: none;
    margin-bottom: 30px;
    font-size: 36px;
    flex-direction: column;
    gap: 10px;
  }

  .check-color, .decrease-color {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .highlight-title {
    font-size: 44px;
    top: 50px;
    gap: 15px;
  }

  .check-color, .decrease-color {
    font-size: 52px;
  }
}

@media (max-width: 480px) {
  .login-card {
    width: 90%;
    padding: 25px 20px;
  }

  .login-carousel {
    display: none; /* 在极小屏幕上隐藏轮播图 */
  }

  :deep(.el-carousel__container) {
    height: 220px !important;
  }
  /* 响应式布局 */
  @media (max-width: 1024px) {
    .login-container {
      padding: 0 20px;
      gap: 40px;
    }

    .highlight-title {
      font-size: 48px;
    }

    .check-color, .decrease-color {
      font-size: 56px;
    }
  }

  @media (max-width: 900px) {
    .login-container {
      flex-direction: column;
      padding: 120px 20px 40px;
      gap: 30px;
      align-items: center;
    }

    .login-carousel {
      width: 100%;
      max-width: 500px;
    }

    .login-card {
      width: 100%;
      max-width: 500px;
    }

    .highlight-title {
      font-size: 40px;
      top: 40px;
      gap: 15px;
    }

    .check-color, .decrease-color {
      font-size: 48px;
    }
  }

  @media (max-width: 768px) {
    .login-container {
      padding: 100px 15px 30px;
    }

    .login-carousel {
      display: none; /* 在768px以下屏幕宽度隐藏轮播图 */
    }

    .highlight-title {
      font-size: 36px;
      top: 30px;
    }

    .check-color, .decrease-color {
      font-size: 42px;
    }

    .login-card {
      max-width: 450px;
      padding: 25px 20px;
    }
  }

  @media (max-width: 480px) {
    .login-container {
      padding: 90px 15px 20px;
    }

    .highlight-title {
      font-size: 28px;
      top: 25px;
      gap: 10px;
    }

    .check-color, .decrease-color {
      font-size: 34px;
    }

    .login-card {
      padding: 20px 15px;
    }

    .form-header h3 {
      font-size: 18px;
    }

    :deep(.el-form-item) {
      margin-bottom: 12px;
    }
  }

  @media (max-width: 360px) {
    .login-container {
      padding: 80px 10px 15px;
    }

    .highlight-title {
      font-size: 24px;
      top: 20px;
    }

    .check-color, .decrease-color {
      font-size: 28px;
    }

    .login-card {
      padding: 15px 12px;
    }

    .login-title {
      font-size: 18px;
    }

    .login-subtitle {
      font-size: 12px;
    }
  }
}

/* 修改客服邀请方框样式 */
.customer-service-box {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: linear-gradient(135deg, #efceb1, #d56e48);
  padding: 10px 14px;  /* 更小的内边距 */
  border-radius: 10px;
  box-shadow: 0 8px 15px rgba(52, 152, 219, 0.3);
  color: white;
  font-size: 12px;  /* 更小的字体 */
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 180px;  /* 更小的宽度 */
  display: flex;
  flex-direction: row;  /* 水平排列 */
  align-items: center;
  gap: 10px;
}
/* 将礼物图标放在前面 */
.gift-icon-wrapper {
  position: relative;
  margin-left: -20px;  /* 让图标向左偏移，突出在方框外 */
}

.customer-service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(52, 152, 219, 0.4);
}

.gift-animation {
  position: relative;  /* 修改为相对定位 */
  top: auto;  /* 移除绝对定位的top */
  left: auto;  /* 移除绝对定位的left */
  transform: none;  /* 移除transform */
}

.gift-icon {
  font-size: 22px;
  color: #FFD43B;
  background: #fff;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: bounce-gift 2s infinite;
}

.service-text {
  font-weight: 500;
  font-size: 12px;  /* 更小的字体 */
  text-align: left;
  line-height: 1.4;
}

/* 二维码气泡 */
.qrcode-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 20px;
  width: 220px;
  transition: all 0.3s ease;
  animation: fadeIn 0.3s ease-out;
}

.qrcode-popup:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
}

.qrcode-text {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

@keyframes bounce-gift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .customer-service-box {
    right: 15px;
    bottom: 15px;
    padding: 10px 12px;
    width: 180px;
    font-size: 12px;
  }

  .gift-icon {
    font-size: 20px;
    padding: 5px;
  }

  .qrcode-popup {
    width: 180px;
  }

  .qrcode-img {
    width: 140px;
    height: 140px;
  }
}
</style>